interface LayoutProps {
  children: React.ReactNode
  products: React.ReactNode
  contact: React.ReactNode
  about: React.ReactNode
  cases: React.ReactNode
  news: React.ReactNode
}

const Layout: React.FC<LayoutProps> = async (props) => {
  const { children, products, contact, about, cases, news } = props
  return (
    <main>
      {children}
      <div className='relative'>
        {/* 拼色背景 */}
        <div className='absolute top-0 bottom-0 left-0 right-0 flex flex-col z-0'>
          <div className='w-full flex-[47] lg:flex-1'></div>
          <div className='w-full flex-[53] lg:flex-1 bg-[#211718]'></div>
        </div>
        <div className='relative z-10'>
          {products}
          <div className='h-[1.875rem] lg:h-[5.4375rem]' />
          {contact}
          <div className='h-[2.75rem] lg:h-[5.375rem] 2xl:h-[8.0625rem]' />
          {about}
          <div className='h-[1.96875rem] lg:h-[4.1875rem]' />
        </div>
      </div>
      {cases}
      {news}
    </main>
  )
}

export default Layout
